<template>
  <section class="box">
    <div class="inner">
      <h1 class="cover-heading remainingTime">{{ remainingTime }}</h1>
      <h1 class="cover-heading">{{ msg }}</h1>

      <div class="links">
        <button 
          class="button--green" 
          @click="go">{{ immediatelyStr }}</button>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      timer: null,
      jumpTimer: null,
      remainingTime: 5,
      immediatelyStr: 'Immediately',
      msg: 'Comming soon ...'
    }
  },
  mounted() {
    this.start()
  },
  beforeDestroy() {
    clearInterval(this.timer)
    clearTimeout(this.jumpTimer)
  },
  methods: {
    go() {
      this.remainingTime = 0
      this.immediatelyStr = '!!!'
      this.msg = '已下线'
    },
    start() {
      this.timer = setInterval(() => {
        this.remainingTime--
        if (this.remainingTime < 1) {
          this.go()
          window.clearInterval(this.timer)
        } else {
        }
      }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
@import url('~assets/css/page-layout.less');

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
.remainingTime {
  font-size: 5rem;
}

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) {
}

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: 992px) {
}

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: 1200px) {
}
</style>
